<template> 
    <div class="register">
        <div class="reg-text">
            <textarea placeholder="帖子内容" v-model="content"></textarea> 
        </div>
        <div class="title">添加图片（最多添加6张）</div>
        <div class="clear-both">
            <div class="img-box float-left" v-for="(item,index) in imgList" :key="index">
                <image  class="img"  mode="aspectFit"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+item"  ></image>
                <i class="clear-icon" @click="clearImg(index)">×</i>
            </div>
            <div class="img-box float-left add-img text-center" @click="clickInput" v-if="imgList.length<6">
                <label for="imgInput">+</label>
                <input type="file" id="imgInput"  accept="image/png, image/jpeg, image/jpg">
            </div> 
        </div>
        <div class="btn text-center" @click="submitMain">确定</div>
    </div> 
</template>

<script> 
import * as api from '@/utils/api' 
import {baseUrl} from '@/utils/config' 
export default {
    onLoad(opt){
        this.topicsId=opt.topicsId;
    },
    components: {
         
    }, 
    data () {
        return {
            imgList:[],
            content:'', //内容
            topicsId:'',
        }
    },
    methods:{
         
        clickInput(){
            var that = this
            wx.chooseImage({
                count: 6, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    let resArr=res.tempFilePaths;
                    let pathArr=[];
                    if(that.imgList.length==0){
                        pathArr=res.tempFilePaths;
                    }else if(that.imgList.length!=0&&that.imgList.length<6){
                        pathArr=pathArr.concat(resArr);
                    }
                    that.upload(that, pathArr);
                }
           })
        },
        //上传图片
        upload(page, path) {
            let vm = this;
            let uploadImgCount = 0;  
            wx.showToast({
                icon: "loading",
                title: "正在上传"
            });
            for (var i = 0, h = path.length; i < h; i++) {  
                wx.uploadFile({
                    url: `${baseUrl}base/upload-file`,
                    filePath: path[i], 
                    name: 'file',
                    header: { "Content-Type": "multipart/form-data",'token':wx.getStorageSync('h_token'),'uid':wx.getStorageSync('u_id')},
                    formData: { 
                        'name':path[i]
                    },
                    success: function (res) { 
                        uploadImgCount++;  
                        if (JSON.parse(res.data).code != 200) { 
                            wx.showModal({
                                title: '提示',
                                content: '上传失败',
                                showCancel: false
                            })
                            return;
                        }else{
                            if(vm.imgList.length<9){
                                vm.imgList.push(JSON.parse(res.data).data);
                            }else{
                                 wx.showModal({
                                    title: '提示',
                                    content: '最多只能上传五张照片',
                                    showCancel: false
                                })   
                            } 
                        }
                        //如果是最后一张,则隐藏等待中  
                        if (uploadImgCount == path.length) {  
                            wx.hideToast();  
                        }
                    },
                    fail: function (e) {
                        wx.showModal({
                            title: '提示',
                            content: '上传失败',
                            showCancel: false
                        })
                    },
                    
                    complete: function () {
                        wx.hideToast();  //隐藏Toast
                    }
                })
            }
        },
        //删除图片
        clearImg(val){
            this.imgList.splice(val,1);  
        },
        submitMain(){
            let vm = this;
            let  ImgList=''
            vm.imgList.forEach((list,listIndex)=>{
                ImgList=ImgList+','+list;
            });
            let body={
                model: "Forums",
                data: {           
                    content: vm.content,      
                    images: ImgList,              
                    uid: wx.getStorageSync('u_id'),
                    uid_type:1,
                    topic_id:vm.topicsId  //---话题id（只能在话题里发帖子）
                }
            };
            let title=vm.content.substring(0, 6);
            body.data.title=title;
            api.createSite(body).then(res=>{
                if(res.data.code==200){ 
                    wx.navigateBack({ delta: 2 });
                } 
            }) 
        },
    }, 
}

</script>
<style lang="scss">
page{
    height:100%;
}
.register{
    height:70%;
    background:#fff;
    padding:20rpx;
    box-sizing:border-box;
    .reg-text{
        font-size:28rpx;
    }
    .title{
        font-size:28rpx;
        color:#999;
        padding:10rpx 0;
    }
    .img-box{
        position:relative;
        display:inline-block;
        height:160rpx;
        width:160rpx; 
        color:#DEDEDE;
        margin-right:20rpx;
        padding:20rpx;
        box-sizing:border-box;
        .img{
            height:100%;
            width:100%; 
        } 
        .clear-icon{
            position:absolute;
            top:0;
            left:0;
            padding:0 8rpx;
            font-size:28rpx;
            border-radius:50%;
            background:#CD4640;
            color:#fff;
        }
    }
    .add-img{
        font-size:40rpx;
        line-height:140rpx;
        border:1rpx dotted #DEDEDE;
        label{
            display:inline-block;
            width:100%;
            height:100%;
        }
        input{
            
            width:0;
            height:0;
        }
    }
    .btn{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        height:100rpx;
        line-height:100rpx;
        color:#fff;
        background:#CD4640;
        font-size:28rpx;
    }
} 
</style>
